<template>
    <div>
        <!-- index -->
        <!-- 头部 -->
        <el-row class="header-container">
            <el-col :span="24">
                <el-row class="logo-container">
                    <el-col :span="20" :offset="2">
                        <!-- 标题栏 -->
                        <div class="lf title-text logo-text logo">LOGO</div>
                        <div class="lf title-text logo-text logo">|</div>
                        <div class="lf title-text logo-text">云站务管理系统多企业版</div>
                        <div class="lf title-text logo-time date">2018年7月25日</div>
                        <div class="lf title-text logo-time">15:26:15</div>
                        <!-- 用户栏 -->
                        <ul class="rf user-container">
                            <li @click="showAddr"><img src="../assets/imgs/nav_icon_xiaoxi_default.png" alt=""><span
                                    class="user-text">{{addr}}</span></li>
                            <li class="user-text">|</li>
                            <li class="user-text" @click="showPwdModal">张三</li>
                            <li class="user-text">|</li>
                            <li class="user-text" @click="singUp"><img src="../assets/imgs/nav_icon_tuichu_default.png"
                                                                       alt=""> 退出
                            </li>
                        </ul>
                    </el-col>
                </el-row>
                <!-- 导航栏 -->
                <el-row class="nav-container">
                    <el-col :span="20" :offset="2">
                        <ul class="nav-ul">
                            <li @click="jumpTo(1)" id="sell">售票</li>
                            <li class="active-nav" @click="jumpTo(2)" id="service">营运调度</li>
                            <li @click="jumpTo(3)" id="accounts">检票结算</li>
                            <li @click="jumpTo(4)" id="financeManage">财务管理</li>
                            <li @click="jumpTo(5)" id="inoutManage">进出站管理</li>
                            <li @click="jumpTo(6)" id="book">订票</li>
                            <li @click="jumpTo(7)" id="check">综合查询</li>
                            <li @click="jumpTo(8)" id="statement">报表中心</li>
                            <li @click="jumpTo(9)" id="chart">集团管控</li>
                            <li @click="jumpTo(10)" id="saleManage">分销管理</li>
                            <li @click="jumpTo(11)" id="carManage">车队管理</li>
                            <li @click="jumpTo(12)" id="allManage">综合管理</li>
                        </ul>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <!-- 内容栏 -->
        <el-row>
            <el-col :span="20" :offset="2" class="router-container">
                <router-view @sendTag="getTag"></router-view>
            </el-col>
        </el-row>
        <!--登录点 S-->
        <div class="submitModal" v-if="showModal">
            <div class="submitModal-box">
                <div class="close-btn" @click="closeModel">×</div>
                <div class="submitModal-title">
                    <div class="left-choose lf">
                        <img src="../assets/imgs/operation_bg_biaoti_default.png" alt="" class="lf">
                        <div class="lf title">登录点</div>
                    </div>
                </div>

                <avue-form ref="form" value='' v-model="objModal" :option="option" class="yz-form lf"></avue-form>
                <div class="model-btn">
                    <button class="sure-btn" @click="sureBtn"><i class="lf"></i><span>确定</span></button>
                </div>
            </div>
        </div>
        <!--登录点 E-->

        <!--修改密码 S-->
        <div class="submitModal pwdModal" v-if="pwdModal">
            <div class="submitModal-box">
                <div class="close-btn" @click="closeModel">×</div>
                <div class="submitModal-title">
                    <div class="left-choose lf">
                        <img src="../assets/imgs/operation_bg_biaoti_default.png" alt="" class="lf">
                        <div class="lf title">修改密码</div>
                    </div>
                    <div class="oldPwd lf">
                        <span>原密码</span><input v-model="oldpwds" type="password" placeholder=""/>
                    </div>
                    <div class="oldPwd lf">
                        <span>新密码</span><input v-model="newpwds" type="password" placeholder=""/>
                    </div>
                    <div class="oldPwd affirmpwd lf">
                        <span>确认密码</span><input v-model="affirmpwds" type="password" placeholder=""/>
                    </div>
                </div>

                <div class="model-btn">
                    <button class="sure-btn lf" @click="surePwdBtn"><i class="lf"></i><span>确定</span></button>
                    <button class="cancel-btn rf" @click="cancelModal"><i class="cancel-icon lf"></i><span
                            class="lf">取消</span></button>
                </div>
            </div>
        </div>
        <!--修改密码 E-->
    </div>

</template>

<script>
    import "../assets/js/jquery.js";

    const DIC = {
        VAILD: []
    };
    export default {
        data: function () {
            return {
                objModal: "",
                addr: "",
                oldpwds: "",
                newpwds: "",
                affirmpwds: "",
                showModal: false,
                pwdModal: false,
                option: {
                    dicData: DIC,
                    column: [
                        {
                            label: "请选择登录点",
                            prop: "choose",
                            type: "select",
                            dicData: "VAILD",
                            span: 24
                        }
                    ]
                }
            };
        },
        methods: {
            singUp() {
                this.$router.push("/login");
            },
            loadList() {
                this.postRequest("/sys/org/nameList").then(target => {
                    console.log(target);
                    var tag = target.data;
                    DIC.VAILD = [];
                    for (var i = 0; i < tag.length; i++) {
                        DIC.VAILD.push({
                            label: tag[i].name,
                            value: tag[i].name
                        });
                    }
                });
            },
            closeModel() {
                if (this.$route.query.orderId === "yes") {
                    this.$router.push("/index");
                    this.showModal = false;
                }
                this.showModal = false;
                this.pwdModal = false;
            },
            showAddr() {
                this.showModal = true;
            },
            showPwdModal() {
                this.pwdModal = true;
            },
            cancelModal() {
                this.pwdModal = false;
            },
            loadName() {
                this.postRequest("/sys/user/listWithSpell").then(target => {
                    console.log(target);
                    var tag = target.data;
                });
            },
            sureBtn() {
                if (this.objModal.choose === "") {
                    this.$message({
                        message: "请选择登录点",
                        type: "warning"
                    });
                } else {
                    this.addr = this.objModal.choose;
                    this.showModal = false;
                    this.$router.push("/index");
                }
            },
            surePwdBtn() {
                //  pwdOld='+this.oldpwds+'&pwdNew='+this.newpwds+'
                this.postRequest("/sys/user/changepwd?pwdOld=998&pwdNew=W5K021").then(
                    target => {
                        console.log(target);
                        var tag = target.data;
                        if (tag[0] === "-1") {
                            this.$message.error(tag[1]);
                        } else if (this.newpwds !== this.affirmpwds) {//
                            this.$message.error('新密码和确认密码不一致');
                        } else {
                            this.$message({
                                message: tag[1],
                                type: "success"
                            });
                            this.pwdModal = false;
                        }
                    }
                );
            },
            getTag(val) {
                switch (val) {
                    case 1:
                        $("#sell")
                            .addClass("active-nav")
                            .siblings()
                            .removeClass("active-nav");
                        break;
                    case 2:
                        $("#service")
                            .addClass("active-nav")
                            .siblings()
                            .removeClass("active-nav");
                        break;
                    case 3:
                        $("#accounts")
                            .addClass("active-nav")
                            .siblings()
                            .removeClass("active-nav");
                        break;
                    case 4:
                        $("#financeManage")
                            .addClass("active-nav")
                            .siblings()
                            .removeClass("active-nav");
                        break;
                    case 5:
                        $("#inoutManage")
                            .addClass("active-nav")
                            .siblings()
                            .removeClass("active-nav");
                        break;
                    case 6:
                        $("#book")
                            .addClass("active-nav")
                            .siblings()
                            .removeClass("active-nav");
                        break;
                    case 7:
                        $("#check")
                            .addClass("active-nav")
                            .siblings()
                            .removeClass("active-nav");
                        break;
                    case 8:
                        $("#statement")
                            .addClass("active-nav")
                            .siblings()
                            .removeClass("active-nav");
                        break;
                    case 9:
                        $("#chart")
                            .addClass("active-nav")
                            .siblings()
                            .removeClass("active-nav");
                        break;
                    case 10:
                        $("#saleManage")
                            .addClass("active-nav")
                            .siblings()
                            .removeClass("active-nav");
                        break;
                    case 11:
                        $("#carManage")
                            .addClass("active-nav")
                            .siblings()
                            .removeClass("active-nav");
                        break;
                    case 12:
                        $("#allManage")
                            .addClass("active-nav")
                            .siblings()
                            .removeClass("active-nav");
                        break;
                }
            },
            jumpTo(i) {
                $(".nav-ul li:nth-child(" + i + ")")
                    .addClass("active-nav")
                    .siblings()
                    .removeClass("active-nav");
                switch (i) {
                    case 1:
                        this.$router.push("/index/sell");
                        break;
                    case 2:
                        this.$router.push("/index/service");
                        break;
                    case 3:
                        this.$router.push("/index/accounts");
                        break;
                    case 4:
                        this.$router.push("/index/financeManage");
                        break;
                    case 5:
                        this.$router.push("/index/inoutManage");
                        break;
                    case 6:
                        this.$router.push("/index/book");
                        break;
                    case 7:
                        this.$router.push("/index/check");
                        break;
                    case 8:
                        this.$router.push("/index/statement");
                        break;
                    case 9:
                        this.$router.push("/index/chart");
                        break;
                    case 10:
                        this.$router.push("/index/saleManage");
                        break;
                    case 11:
                        this.$router.push("/index/carManage");
                        break;
                    case 12:
                        this.$router.push("/index/allManage");
                        break;
                }
            }
        },
        computed: {},
        watch: {},
        mounted() {
            if (this.$route.query.orderId === "yes") {
                this.showModal = true;
            }
            this.loadList();
            this.loadName();
            this.addr = this.objModal.choose;
            console.log(this.objModal.choose);
        },
        created() {
            this
                .postRequest(
                    "/login", {
                        orgNo: 1, username: "W5K021", password: "W5K021"
                    }
                )
                .then(data => {
                    console.log(data);
                    console.log("登陆验证完成");
                })
                .catch(() => {
                    alert("网络配置错误");
                });
        }
    };
</script>
<style scoped>
    .lf {
        float: left;
    }

    .rf {
        float: right;
    }

    .header-container {
        height: 150px;
        background: #009688;
        position: relative;
    }

    .title-text {
        color: white;
    }

    .logo {
        padding-right: 25px;
    }

    .logo-text {
        font-weight: bold;
        font-size: 18px;
    }

    .date {
        padding-left: 100px;
    }

    .logo-time {
        font-size: 12px;
        padding-right: 5px;
    }

    .logo-container {
        margin-top: 35px;
    }

    .user-container {
        width: 300px;
        display: flex;
        justify-content: space-around;
    }

    .user-container img {
        vertical-align: middle;
        margin-right: 5px;
    }

    .user-text {
        font-size: 14px;
        color: #99d5cf;
        cursor: pointer;
    }

    .nav-container {
        width: 100%;
        position: absolute;
        bottom: 0px;
        /* left:50%; */
        /* margin-left:-720px; */
    }

    .nav-container li {
        width: 8%;
        height: 45px;
        line-height: 45px;
        float: left;
        color: #f6fafa;
        /* border:1px solid black; */
        text-align: center;
        background: rgba(0, 0, 0, 0.3);
        cursor: pointer;
    }

    .active-nav {
        background: white !important;
        color: black !important;
    }

    .router-container {
        /* height: 500px; */
        /* border:1px solid black; */
    }

    .oldPwd {
        margin: 25px 0 15px 30px;
        font-size: 12px;
        color: #464c5b;
    }

    .affirmpwd {
        margin: 25px 0 15px 20px;
    }

    .oldPwd > input {
        margin-left: 10px;
        background: #ffffff;
        border: 1px solid #dcdee2;
        border-radius: 4px;
        height: 30px;
        line-height: 20px;
        outline: none;
        padding-left: 15px;
    }

    .submitModal {
        /*display: none;*/
        box-sizing: border-box;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.35);
        z-index: 1000;
    }

    .submitModal-box {
        background: #fff;
        box-sizing: border-box;
        border-radius: 8px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 345px;
        padding: 0 20px 20px;
        border-top: 6px solid #007266;
    }

    .submitModal-title {
        box-sizing: border-box;
        padding: 15px 0 0 0;
        overflow: hidden;
    }

    .submitModal-title .title {
        font-size: 16px;
        color: #009688;
        font-weight: bold;
        margin-left: 8px;
    }

    .submitModal button {
        outline: none;
        border: none;
        color: #fff;
        box-sizing: border-box;
        font-size: 12px;
        background: #009688;
        padding: 5px 10px;
        border-radius: 4px;
        overflow: hidden;
        cursor: pointer;
    }

    .pwdModal .sure-btn {
        margin-left: 33px;
        padding: 5px 15px;
    }

    .pwdModal .cancel-btn {
        padding: 5px 15px;
        margin-right: 35px;
    }

    .sure-btn {
        margin: 0 auto;
    }

    button > i {
        display: inline-block;
        width: 18px;
        height: 18px;
        margin-right: 5px;
        background: url("../assets/imgs/operation_btn_icon_tijiao_default.png") no-repeat center/cover;
        background-size: 100% 100%;
    }

    .cancel-icon {
        background: url("../assets/imgs/operation_btn_icon_quxiao_default.png") no-repeat center/cover;
    }

    .model-btn {
        text-align: center;
    }

    .close-btn {
        position: absolute;
        right: 13px;
        top: 5px;
        color: #bdbdbd;
        font-size: 25px;
        cursor: pointer;
    }
</style>
<style>
    .submitModal .el-form-item__label {
        width: 100px !important;
    }

    .submitModal .el-form-item__content {
        margin-left: 100px !important;
    }
</style>
